<template>
  <view class="mxp-bottom-fixed-bar" :class="cusClass" :style="[newStyle, cusStyle]">
    <slot></slot>
  </view>
</template>

<script lang="ts" setup>
  import { type CSSProperties, computed } from 'vue';
  import type { $AllColorStr, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  type $ToolbarProps = {
    /** 层级 */
    zIndex?: number;
    /** 标题文字 */
    left?: $SizeUnitStr;
    /** 调换确定和取消的位置 */
    right?: $SizeUnitStr;
    /** 取消按钮的文字 */
    bottom?: $SizeUnitStr;
    /** 确认按钮的文字 */
    background?: $AllColorStr;
    /** 是否开启底部安全区适配 */
    safeArea?: boolean;
    /** 自定义的样式属性 */
    cusStyle?: CSSProperties;
    /** 自定义类名 */
    cusClass?: string;
  };
  import { getXPNumber } from '../mxp-tool/utils/dom';
  import mxpGetSysInfoStore from '../mxp-tool/store/mxp-store-sys-info';

  defineOptions({
    name: 'mxp-bottom-fixed-bar',
  });

  const props = withDefaults(defineProps<$ToolbarProps>(), {
    zIndex: 999,
    left: '0px',
    right: '0px',
    bottom: '0px',
    background: 'transparent',
    safeArea: true,
    cusStyle: () => ({}),
    cusClass: '',
  });
  defineSlots<{
    /** 主体内容 */
    default?: () => void;
  }>();

  const sys = mxpGetSysInfoStore().getSysInfo();
  const windowWidth = computed(() => sys.value.windowWidth);
  const safeAreaBottom = computed(() => (props.safeArea ? sys.value.safeAreaInsets?.bottom || 0 : 0));

  const newStyle = computed<CSSProperties>(() => {
    return {
      bottom: `${getXPNumber(props.bottom, 0) + safeAreaBottom.value}px`,
      left: props.left,
      right: props.right,
      background: props.background,
      zIndex: props.zIndex,
      width: `${windowWidth.value - getXPNumber(props.left, 0) - getXPNumber(props.right, 0)}px`,
    };
  });
</script>

<style lang="scss" scoped>
  .mxp-bottom-fixed-bar {
    position: fixed;
    z-index: 999;
    display: flex;
  }
</style>
